<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="robots" content="all" />
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">
    <title th:text="${SITE_CONFIG.SITE_NAME}+ ' - 日记'"></title>
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/font-awesome/css/font-awesome.min.css|}">
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/layui/css/layui.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/master.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/gloable.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/nprogress.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/timeline.css|}" />
</head>
<body>
<div th:replace="@{|/${WEB_THEME}/module/navbar.html|}"></div>
    <div class="doc-container" id="doc-container">
         <div class="container-fixed">
            <div class="timeline-box shadow">
                <div class="timeline-main">
                    <h1><i class="fa fa-clock-o"></i>日记</h1>
                    <div class="timeline-line"></div>
                        <div class="timeline-year" th:each="item:${data}">
                            <h2><a class="yearToggle" th:text="${item.key}"></a><i class="fa fa-caret-down fa-fw"></i></h2>
                            <div class="timeline-month">
                                <ul>
                                       <li th:each="article:${item.value}">
                                               <div class="h4 animated fadeInLeft">
                                                        <p class="date" th:text="${#dates.format(article.createTime,'MM月dd日')}"></p>
                                                    </div>
                                                    <p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
                                                    <div class="content animated fadeInRight" th:text="${article.title}"></div>
                                                    <div class="clear"></div>
                                                </li>

                                </ul>
                            </div>
                        </div>
                    <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
                </div>
            </div>
        </div>
    </div>
<div th:replace="@{|/${WEB_THEME}/module/footer.html|}"></div>
    <script th:src="@{|/${WEB_THEME}/source/layui/layui.js|}"></script>
    <script th:src="@{|/${WEB_THEME}/source/js/yss/gloable.js|}"></script>
    <script th:src="@{|/${WEB_THEME}/source/js/plugins/nprogress.js|}"></script>
    <script th:src="@{|/${WEB_THEME}/source/js/pagediary.js|}"></script>
    <script>NProgress.start();</script>
    <script> 
        window.onload = function () {
            NProgress.done();
        };
    </script>
</body>
</html>
